<!-- 
    使用 <script setup> 语法，这是 Vue 3 的组合式 API 的语法糖
    setup 是 Vue 3 中的一个新的组件选项，使组件逻辑更加简洁和模块化
-->
<script setup>
// 这里可以直接使用 import 语句和组合式 API
// 不需要返回任何内容，所有顶级变量和函数都会自动暴露给模板
</script>

<template>
    <!-- 
        <router-view /> 是 Vue Router 的组件，用于渲染当前路由匹配到的组件
        它作为一个占位符，根据当前的 URL 动态渲染不同的页面组件
        这使得 App.vue 成为一个纯路由容器，页面内容由子路由组件决定
    -->
    <router-view />
</template>

<!-- 
    使用 scoped 标记的样式只会应用到当前组件
    这是 Vue 的特性，可以防止样式污染其他组件
    目前为空，意味着这个组件没有特定的样式定义
-->
<style scoped></style>
